<template>
  <div>
    <button @click="countClick">count:{{ count }}</button>
    <button @click="infoClick">info:{{ info }}</button>
  </div>
</template>

<script setup>
import { reactive, ref, watch } from "vue";
const count = ref(0);

const countClick = () => {
  count.value += 1;
};
const info = reactive({
  name: "jdzhang",
  age: 18,
});
const infoClick = () => {
  info.age++;
};
// watch监听ref
watch(count, (newValue, oldValue, cleanUp) => {
  cleanUp(() => {
    console.log("do some thing before next watch");
  });
  console.log("watch监听count111", newValue);
});
// watch监听reactive
watch(info, (newValue, oldValue, cleanUp) => {
  console.log("watch监听info", newValue);
});
// watch监听reactive内部单个属性
watch(
  () => info.age,
  (newValue, oldValue, cleanUp) => {
    console.log("watch监听info.age", newValue);
  }
);
// watch的混合监听
watch([count, info], ([newCount, newInfo], oldValue, cleanUp) => {
  console.log("watch混合监听count, info", newCount, newInfo);
});
watch([count, () => info.age], ([newCount, newInfoAge], oldValue, cleanUp) => {
  console.log("watch混合监听count, info.age", newCount, newInfoAge);
});
</script>

<style scoped>
button {
  padding: 20px 20px;
  background-color: pink;
}
</style>
